<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
	<link href="img/favicon.ico" rel="shortcut icon" />
	<title>Java Web Monopoly Game</title>
	<link rel="stylesheet" href="css/loadPage.css">
<script language="JavaScript" type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
	<!-- jQuery Alert files -->
    <script src="js/libs/jquery-alerts/jquery.alerts.js" type="text/javascript"></script>
    <link href="js/libs/jquery-alerts/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

    </head>

    <body>

	<script type="text/javascript" language="javascipt">
	    function validateForm()
	    {
		var monopolyTitle = "Java Web Monopoly - Error"
		if(document.frmCreate.gameName.value == "")
		{
		    jalert("Game Name Cannot be Empty!", monopolyTitle);
		    document.frmCreate.gameName.focus();
		    return false;
		}
		if(document.frmCreate.playerName.value == "")
		{
		    jalert("Player Name Cannot be Empty!", monopolyTitle);
		    document.frmCreate.playerName.focus();
		    return false;
		}
		var numOfPlayers, numOfHumans;
		numOfPlayers = document.frmCreate.nPlayers.value;
		numOfHumans = document.frmCreate.nhPlayers.value;
		if(numOfPlayers < numOfHumans)
		{
		    jalert("Total Players number  must be bigger than the number of human players!", monopolyTitle);
		    return false;
		}
		return true;
	    }
	</script>

	<div class="container">
	    <h1>Welcome to the Java Monopoly Game!</h1>
	    <h2>A Monopoly Game by Avia Tam and Assaf Miron</h2>

	    <img src="img/monopoly-man.png" style="float:right;">
	    <h3>Would you like to <B>Create a Game?</B></h3>


	    <span id="errMsg" class="H1 error"></span>
	    <form method="post" action="MonopolyServlet" name="frmCreate" onSubmit="return validateForm()">

		<table cellspacing=1 cellpadding=3>
		    <tr>
			<td width="50%">Game Name:<BR> <input type="text"
							      name="gameName" id="txtGameName" value=''></td>
			<td width="50%">Player Name:<BR> <input type="text"
								name="playerName" id="txtPlayerName" value=''>
			</td>
		    </tr>
		    <tr colspan="2">
			<td><input type="checkbox" name="autoDice" id="chkAutoDice">
					Automatic Dice Roll Mode</td>
		    </tr>
		    <tr>
			<td width="50%">Total Number of Players:<BR> <select
				name="nPlayers" id="lstNumofPlayers">
				<%
					    for (int i = 2; i < 7; i++) {
				%>
				<option value='<%=i%>'><%=i%></option>
				<%
					    }
				%>
			    </select></td>
			<td width="50%">Number of Human Players:<BR> <select
				name="nhPlayers" id="lstNumofHumans">
				<%
					    for (int i = 1; i < 7; i++) {
				%>
				<option value='<%=i%>'><%=i%></option>
				<%
					    }
				%>
			    </select></td>
		    </tr>
		    <tr>
			<td></td>
			<td><input type="submit" name="btnGo" id="btnGo"
				   class="button medium blue" value='Create a Game'></td>
		    </tr>
		</table>
	    </form>

	</div>
    </body>
</html>